<template>
  <van-list
    v-model:loading="listLoading"
    :finished="props.finished"
    finished-text="没有更多了"
    @load="$emit('load')"
  >
    <div class="consultation-list">
      <div
        v-for="item in props.list"
        :key="item.id"
        class="consultation-card"
        @click="$emit('click', item)"
      >
        <div class="patient-info">
          <van-image
            round
            width="50"
            height="50"
            :src="item.patientAvatar || require('@/assets/images/default-avatar.png')"
          />
          <div class="info-content">
            <div class="name-wrap">
              <span class="name">{{ item.patientName }}</span>
              <van-tag :type="getStatusType(item.status)">
                {{ getStatusText(item.status) }}
              </van-tag>
            </div>
            <div class="consultation-type">
              {{ getConsultationType(item.type) }}
            </div>
          </div>
        </div>

        <div class="consultation-info">
          <p class="time">{{ formatDateTime(item.createTime) }}</p>
          <p class="description">{{ item.description }}</p>
        </div>

        <div class="action-bar">
          <template v-if="item.status === 0">
            <van-button type="primary" size="small" @click.stop="handleAccept(item)">
              接诊
            </van-button>
          </template>
          <template v-else-if="item.status === 1">
            <van-button type="primary" size="small" @click.stop="handleChat(item)">
              继续问诊
            </van-button>
          </template>
          <template v-else>
            <van-button plain type="primary" size="small" @click.stop="handleDetail(item)">
              查看详情
            </van-button>
          </template>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script setup>
import { ref } from 'vue'
import { formatDateTime } from '@/utils/format'
import { showToast } from 'vant'
import { updateConsultationStatus } from '@/api/doctor'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  loading: Boolean,
  finished: Boolean
})

// 使用本地的loading状态
const listLoading = ref(false)

const emit = defineEmits(['load', 'click'])

const getStatusType = (status) => {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'primary'
    case 2: return 'success'
    case 3: return 'danger'
    default: return 'default'
  }
}

const getStatusText = (status) => {
  switch (status) {
    case 0: return '待接诊'
    case 1: return '问诊中'
    case 2: return '已完成'
    case 3: return '已取消'
    default: return '未知'
  }
}

const getConsultationType = (type) => {
  switch (type) {
    case 1: return '图文问诊'
    case 2: return '视频问诊'
    default: return '普通问诊'
  }
}

const handleAccept = async (consultation) => {
  try {
    await updateConsultationStatus(consultation.id, 1)
    showToast('接诊成功')
    emit('click', consultation)
  } catch (error) {
    showToast('接诊失败：' + error.message)
  }
}

const handleChat = (consultation) => {
  emit('click', consultation)
}

const handleDetail = (consultation) => {
  emit('click', consultation)
}
</script>

<style lang="scss" scoped>
.consultation-list {
  padding: 16px;

  .consultation-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;

    .patient-info {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .info-content {
        flex: 1;
        margin-left: 12px;

        .name-wrap {
          display: flex;
          align-items: center;
          margin-bottom: 4px;

          .name {
            font-size: 16px;
            font-weight: 500;
            margin-right: 8px;
          }
        }

        .consultation-type {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .consultation-info {
      padding: 12px 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-bottom: 12px;

      .time {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
      }

      .description {
        font-size: 14px;
        color: #333;
        line-height: 1.5;
      }
    }

    .action-bar {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
  }
}
</style>
